<script setup lang="ts">
import {useRouter} from 'vue-router';
import {reactive} from "vue";

const router = useRouter()

const pageBack = () => {
  router.back()
}

const formData = reactive({
  name: '',
  phone: '',
  checked: false,
  roleType: 'manager'
})

const switchRoleType = () => {
  formData.roleType = formData.roleType == 'manager' ? 'user' : 'manager'
}

</script>

<template>
  <div class="page-layout hor-layout">
    <div class="login-left-layout ver-layout">
      <div class="login-title">ADB自助授权平台</div>
      <img class="login-bg" src="../../assets/img/login-icon.png">
    </div>

    <div class="login-right-layout ver-layout">
      <div class="title-layout hor-layout-side-center">
        <van-button v-if="formData.roleType=='user'" type="primary" size="small" @click="switchRoleType">切换管理员</van-button>
        <van-button v-else type="primary" size="small" @click="switchRoleType">切换普通用户</van-button>
        <img class="close-icon" src="../../assets/img/close-icon.png">
      </div>
      <div class="login-content ver-layout">
        <img class="app-logo" src="../../assets/img/app-logo.png">
        <div class="app-title">ADB自助授权平台</div>
        <div class="login-form">
          <van-field class="form-item" required size="large" v-model="formData.name" label="姓名"
                     placeholder="请输入用户姓名"/>
          <van-field class="form-item" required size="large" v-model="formData.phone" type="tel" label="手机号"
                     placeholder="请输入手机号"/>
        </div>
        <div class="error-hint">登录信息错误，请核准后重新填写！</div>
        <van-checkbox class="agreement-layout" v-model="formData.checked" shape="square" icon-size="15px">
          <div class="agreement-view">
            阅读并同意
            <router-link to="/installAgreement">
              <span class="agreement-link">隐私政策</span>
            </router-link>
          </div>
        </van-checkbox>
        <div class="login-btn">
          <router-link to="/home">
            <van-button type="primary" :block="true">登录</van-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.page-layout {
  width: 96%;

  .login-left-layout {
    position: relative;
    //width: 55%;
    flex: 55;

    .login-title {
      position: absolute;
      top: 20px;
      width: 100%;
      text-align: center;
      font-size: 45px;
      color: white;
    }

    .login-bg {
      width: 100%;
      height: 100vh;
    }
  }

  .login-right-layout {
    //width: 45%;
    flex: 45;

    .title-layout {
      margin: 10px;
      width: calc(100% - 10 * 2px);

      .close-icon {
        width: 20px;
        height: 20px;
      }
    }

    .login-content {
      margin: 0px auto;

      .app-logo {
        margin: auto;
        margin-top: 20%;
        width: 100px;
        height: 100px;
      }

      .app-title {
        margin: auto;
        margin-top: 5%;
        font-size: 35px;
        font-weight: bold;
        color: #007dff;
      }

      .login-form {
        margin: auto;
        margin-top: 8%;
        //width: 25vw;

        .form-item {
          border-bottom: 1px solid #999999;
        }
      }

      .error-hint {
        margin-top: 20px;
        margin-left: 20px;
        font-size: 12px;
        color: #d9001b;
      }

      .agreement-layout {
        margin-top: 20px;
        margin-left: 20px;

        .agreement-view {
          font-size: 14px;

          .agreement-link {
            color: #37a7f7;
            text-decoration: underline;
          }
        }
      }

      .login-btn {
        margin-top: 30px;
      }
    }
  }
}

.login-form::v-deep .van-field__value {
  border: 1px solid #ccc;
}
</style>
